<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/web-frame/element/js/vue.js"></script>
</head>
<body>
<div id="app">
    <h2>v-if条件示例</h2>
    <h1 v-if="awesome_1">Vue is awesome!</h1>
    <h1 v-if="awesome_2">Vue is awesome!</h1>
    <hr>

    <h2>v-if-else条件示例</h2>
    <h1 v-if="awesome_2">Vue is awesome!</h1>
    <h1 v-else>Oh no 😢</h1>

    <h2>v-else的使用</h2>
    <div v-if="Math.random() > 0.5">
        Now you see me
    </div>
    <div v-else>
        Now you don't
    </div>
    <hr>

    <h1 v-show="ok">Hello!</h1>
</div>
<script>
    var Main = {
        data() {
            return {
                awesome_1:true,
                awesome_2:false,
                ok:true
            }
        },
        created(){

        },
        methods: {

        },
        computed: {

        }
    }
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')
</script>
</body>
</html>